<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>img swipper</title>
  <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="container" class="cm-content">
  <div id='wrap'>
    <div class="block">
      <div class="img" @mousedown='md($event)' 
  @mousemove='mm($event)' @mouseup='mu($event)' :class='{ swipper: swipperClass }'>
        <div class="inner" v-for = "item in items">
          <img :src="item"/>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#container',
    data: {
      mlock: true,
      position: {
        start: 0,
        end: 0
      },
      wrapLength: 0,
      swipperClass: false,
      imgs: [
        './img/1.png',
        './img/2.png',
        './img/3.jpg',
        './img/1.png',
        './img/2.png',
        './img/3.jpg'
      ],
      items: [],
      count: 0,
      obj: {}
    },
    created: function() {
      this.wrapLength = document.querySelector('#wrap .inner').offsetWidth / 2;
      this.onresize();
    },
    mounted: function() {
      var self = this;
      var length = self.imgs.length - 1;
      var e = document.querySelector('#wrap .block .img');
      var transitionWhich = self.transitionWhich(e); 
      self.transitionEvent(e, transitionWhich, self, length);
      self.touchstart(e);
      self.touchmove(e);
      self.touchend(e);
      self.items.push(self.imgs[length]);
      self.items.push(self.imgs[self.count]);
      self.items.push(self.imgs[self.count+1]);
    },
    methods: {
      /** 监听transition类型 */
      transitionWhich: function(e) {
        var t;
        var transitions = {  
          'transition':'transitionend',  
          'OTransition':'oTransitionEnd',  
          'MozTransition':'transitionend',  
          'WebkitTransition':'webkitTransitionEnd',  
          'MsTransition':'msTransitionEnd'  
        };  
        for(t in transitions){  
          if( e.style[t] !== undefined ){ 
             return transitions[t];  
          }  
        }    
      },
      /** transition结束时间 */
      transitionEvent: function(e,transitionWhich,self,length) {
        e.addEventListener(transitionWhich, function() {
          var left = e.style.left.replace('px','');
          e.removeAttribute('style');
          if( left < 0 ) {
            self.items.splice(0, self.items.length);
            self.count ++;
            if(self.count  == length ) {
              self.items.push(self.imgs[self.count - 1]);
              self.items.push(self.imgs[self.count]);
              self.items.push(self.imgs[0]);
            } else if (self.count <  length ) {
              self.items.push(self.imgs[self.count - 1]);
              self.items.push(self.imgs[self.count]);
              self.items.push(self.imgs[self.count + 1]);
            } else if(self.count >  length ) {
              self.count = 0;
              self.items.push(self.imgs[length]);
              self.items.push(self.imgs[self.count]);
              self.items.push(self.imgs[self.count+1]);
            }
          } else if( left > 0  ) {
            self.items.splice(0, self.items.length);
            self.count --;
            if(self.count  == -1) {
              self.count = length
              self.items.push(self.imgs[self.count - 1]);
              self.items.push(self.imgs[self.count]);
              self.items.push(self.imgs[0]);
            } else if(self.count >  -1) {
              if(self.count == 0) {
                self.items.push(self.imgs[length]);
              } else if(self.count > 0) {
                self.items.push(self.imgs[self.count - 1]);
              }
              self.items.push(self.imgs[self.count]);
              self.items.push(self.imgs[self.count + 1]);
            } 
          }
        },false); 
      },
      /** 监听窗口变化 */
      onresize: function() {
        var self = this;
        window.onresize = function() {
          console.log('变化')
          self.wrapLength = document.querySelector('#wrap .inner').offsetWidth / 2;
        };
      },
      /** 点击开始事件 */
      start: function(x) {
        this.mlock = false;
        this.swipperClass = false;
        this.position.start = x;
      },
      /** 移动事件 */
      move: function(e,x) {
        var obj = e.target;
        if(!this.mlock && Math.abs(x- this.position.start) > 0) {
          obj.style.left = x- this.position.start  + 'px';
        }
      },
      /** 松开事件 */
      end: function(e,x) {
        this.obj = e.target;
        this.mlock = true;
        this.position.end = x;
        this.swipperClass = true;    
      },
      /** 鼠标点击 */
      md: function(e) {
        this.start(e.clientX);
      },
      /** 鼠标移动 */
      mm: function(e) {
        this.move(e,e.clientX);
      },
      /** 松开鼠标 */
      mu: function(e) {
        this.end(e,e.clientX);
      },
      /** 手指按入 */
      touchstart: function(e) {
        var self = this;
        e.addEventListener('touchstart', function(event) {
          self.start(event.changedTouches[0].clientX);
        },false);
      },
      /** 手指移动 */
      touchmove: function(e) {
        var self = this;
        e.addEventListener('touchmove', function(event) {
          self.move(event,event.changedTouches[0].clientX);
        },false);
      },
      /** 手指抬起 */
      touchend: function(e) {
        var self = this;
        e.addEventListener('touchend', function(event) {
          self.end(event,event.changedTouches[0].clientX);
        },false);
      }
    },
    watch: {
      'swipperClass': function(item) {
        if(item) {
          if(this.position.start - this.position.end >= this.wrapLength) {
            this.obj.style.left = 0 -  this.wrapLength * 2 + 'px';
          } else if (this.position.end - this.position.start  >= this.wrapLength) {
            this.obj.style.left = this.wrapLength * 2 + 'px';
          } else {
            this.obj.style.left = 0 + 'px';
          }
        }
      }
    }
  });
</script>
</html>